<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            font-size: 30px;
            text-align: center;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="dcolor">
        按W,A,S,D,改变颜色
    </div>
    <script>
        var dColor = document.querySelector('.dcolor')
        document.onkeydown = function (e) {
            var key = e.key
            switch (key) {
                case 'a':
                   dColor.style.background = 'red'
                   dColor.style.color='white'
                    console.log('输入a');
                    
                    break
                case 'w':
                    dColor.style.background = 'blue'
                    break
                case 's':
                    dColor.style.background = 'green'
                    break
                case 'd':
                    dColor.style.background = 'black'
                    dColor.style.color='white'

            }


        }
    </script>
</body>

</html>